<template>
  <div class="player">
  <NormalPlayer :totalTime="totalTime" :currentTime="currentTime"></NormalPlayer>
  <MiniPlayer></MiniPlayer>
  <ListPlayer ref="listPlayer"></ListPlayer>
  <audio  :src="currentSong.url" ref="audio" @timeupdate="timeupdate" @ended="end"></audio>
  </div>
</template>

<script>
import NormalPlayer from '../components/Player/NormalPlayer.vue'
import MiniPlayer from '../components/Player/MiniPlayer.vue'
import ListPlayer from '../components/Player/ListPlayer.vue'
import {mapGetters,mapActions} from 'vuex'
import mode from '../store/modeType'
import { getRandomIntInclusive, setLocalStorage, getLocalStorage } from '../tools/tools.js'
export default {
  name:"Player",
  components:{
    NormalPlayer,
    MiniPlayer,
    ListPlayer
  },
  data(){
    return {
      currentTime:0, //当前播放时间进度 timeupdate方法设置
      totalTime:0 //播放歌曲总时长
    }
  },
  methods:{
    ...mapActions([
      'setCurrentIndex',
      'setFavoriteList',
      'setHistorySong',
      'setHistoryList'
    ]),
    //audio 歌曲播放进度函数 - timeupdate监听audio播放
    timeupdate(e){
      this.currentTime = e.target.currentTime
    },
    //播放结束事件 setCurrentIndex - 播放歌曲索引
    //根据播放模式执行下一步
    end(){
      if(this.modeType === mode.loop){ //顺序播放
        this.setCurrentIndex(this.currentIndex + 1)
      }else if(this.modeType === mode.one){ //单曲循环
        this.$refs.audio.play();
      } else if (this.modeType === mode.random){ //随机播放
        let value = getRandomIntInclusive(0,this.songs.length-1)
        this.setCurrentIndex(value)
      }
    }
  },
  computed:{
    ...mapGetters([
      'currentSong',
      'isPlaying',
      'currentIndex',
      'curTime',
      'modeType',
      'songs',
      'favoriteList',
      'historyList'])
  },
  watch:{
    //1.歌曲播放暂停/开始
    //2.添加播放历史
    isPlaying(newValue,oldValue){
      if(newValue){
      this.setHistorySong(this.currentSong);//添加到播放历史列表
      this.$refs.audio.play();
      }else{
        this.$refs.audio.pause();
      }
    },
    //1.播放列表中当前播放歌曲索引
    //2.添加播放历史
    currentIndex(){
      this.$refs.audio.ondurationchange = () => {
        //获取歌曲总时长
        this.totalTime = this.$refs.audio.duration;
        if (this.isPlaying) {
        this.setHistorySong(this.currentSong);//添加到播放历史列表
          this.$refs.audio.play()
        } else {
          this.$refs.audio.pause()
        }
      }
    },
    //当playBottom进度条被点击时会修改curTime
    //相应播放进度
    curTime(newValue,oldValue){
      this.$refs.audio.currentTime = newValue;
    },
    //监听收藏歌曲列表变化 - 存储到localStorage 用于初始化界面赋值以往收藏的歌曲
    favoriteList(newValue,oldValue){
      // window.localStorage.setItem('favoriteList',JSON.stringify(newValue))
      setLocalStorage('favoriteList',newValue)
    },
    //监听播放历史变化 - 存储到localStorage 用于初始化界面赋值以往播放历史歌曲
    historyList(newValue,oldValue){
      // window.localStorage.setItem('historyList',JSON.stringify(newValue))
      setLocalStorage('historyList',newValue)
    }
  },
  //初始化界面时获取localStorage数据(收藏歌曲列表 和 播放历史里诶啊哦) 并赋值
  created(){
    //收藏歌曲部分
    // let favoriteList = JSON.parse(window.localStorage.getItem('favoriteList'));
    let favoriteList = getLocalStorage('favoriteList')
    if(favoriteList ===null) {return};
    this.setFavoriteList(favoriteList);
    //播放历史部分
    let historyList = getLocalStorage('historyList')
    // let historyList = JSON.parse(window.localStorage.getItem('historyList'));
    if(historyList ===null) {return};
    this.setHistoryList(historyList)
  },
  //播放?切换歌曲时 歌曲总时长赋值
  mounted () {
    this.$refs.audio.ondurationchange = () => {
      this.totalTime = this.$refs.audio.duration
    }
  },
}
</script>

<style lang="scss" scoped>

</style>